<template>
  <div>
    <el-dialog title="新增门店" class="noselect"
               v-dialogdrag=" { target:'.el-dialog__header',container:'.el-dialog',border:'.el-dialog__wrapper'}"
               :close-on-click-modal="false" :visible.sync="showDialog" :before-close="handleClose">
      <div style="margin: 20px;"></div>
      <el-form  :model="modelForm" ref="modelForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label=" " prop="districtId" :rules="[ { required: true, message: '请选择所属区域', trigger: 'change' }]" >
          <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
            <div class="el-input-group__prepend" tabindex="-1">所属区域</div>
            <el-cascader placeholder="请选择上级机构" class="el-cascader-margin w-100p"  size="medium" :disabled="!isSave"
                         :options="treeData"
                         :show-all-levels="false" v-model="modelForm.districtId"
                         change-on-select>
            </el-cascader>
          </div>
        </el-form-item>
        <el-form-item label=" " prop="name"  :rules="[ { required: true, message: '请输入门店名称', trigger: 'blur' }]">
          <el-input placeholder="请输入门店名称" v-model="modelForm.name" auto-complete="off" :maxlength="30" size="medium" >
            <template slot="prepend">
              <el-tooltip placement="top" content="请输入门店名称">
                <el-button tabIndex="-1">门店名称</el-button>
              </el-tooltip>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label=" " prop="industry" :rules="[{ required: true, message: '请选择所属业态', trigger: 'change' }]">
          <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
            <div class="el-input-group__prepend" tabindex="-1">所属业态</div>
              <el-select class="el-cascader-margin w-100p" v-model="modelForm.industry" placeholder="请选择所属业态">
                <el-option
                  v-for="item in yetaiList"
                  :key="item.name"
                  :label="item.name"
                  size="medium"
                  :value="item.name">
                </el-option>
              </el-select>
          </div>
        </el-form-item>
        <el-form-item label=" ">
                <div class="el-from-item_title">门店属性</div>
                <div class="el-from-item_content text-left" style="margin-left:80px">
                <el-radio-group v-model="modelForm.propType" @change="changeData">
                    <el-radio :label="i.key" :value="i.text" v-for="i in propTypes" :key="i.key">{{i.text}}</el-radio>
                </el-radio-group>
                </div>
        </el-form-item>

        <el-form-item label=" " prop="phone"  :rules="[ { required: true, message: '请输入手机号', trigger: 'blur' },rules.phone]">
          <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
          <el-input placeholder="请输入手机号" v-model="modelForm.phone" auto-complete="off" size="medium" >
            <template slot="prepend">
              <el-tooltip placement="top" content="请输入手机号">
                <el-button tabIndex="-1">手机号</el-button>
              </el-tooltip>
            </template>
          </el-input>
          </div>
        </el-form-item>
        <el-form-item label=" " prop="telephone" >
          <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
          <el-input placeholder="请输入联系电话" v-model="modelForm.telephone" auto-complete="off" :maxlength="20" size="medium" >
            <template slot="prepend">
              <el-tooltip placement="top" content="请输入联系电话">
                <el-button tabIndex="-1">联系电话</el-button>
              </el-tooltip>
            </template>
          </el-input>
          </div>
        </el-form-item>
        <el-form-item label=" " prop="location"  :rules="[{ required: true, message: '请选择城市区域', trigger: 'change' }]">
          <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
            <div class="el-input-group__prepend" tabindex="-1">城市区域</div>
            <el-cascader
              class="el-cascader-margin w-100p"
              size="medium"
              :options="options1"
              v-model="selectedOptions"
              @change="handleChange"
              :change-on-select="true">
            </el-cascader>
          </div>
        </el-form-item>
        <el-form-item label=" " prop="address">
          <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
          <el-input placeholder="请输入详细地址" v-model="modelForm.address" auto-complete="off" size="medium" >
            <template slot="prepend">
              <el-tooltip placement="top" content="请输入详细地址">
                <el-button tabIndex="-1">详细地址</el-button>
              </el-tooltip>
            </template>
          </el-input>
          </div>
        </el-form-item>
        <el-form-item label=" " prop="regCode" :rules="[{ required: true, message: '请输入注册码', trigger: 'blur' }]">
          <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
            <el-input placeholder="请输入注册码" v-model="modelForm.regCode" auto-complete="off" size="medium" >
            <template slot="prepend">
              <el-tooltip placement="top" content="请输入注册码">
                <el-button tabIndex="-1">注册码</el-button>
              </el-tooltip>
            </template>
          </el-input>
          </div>
        </el-form-item>

        <el-form-item label=" " prop="username"  :rules="[ { required: true, message: '请输入用户名', trigger: 'blur' }]">
          <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
          <el-input placeholder="请输入用户名" v-model="modelForm.username" auto-complete="off" size="medium" >
            <template slot="prepend">
              <el-tooltip placement="top" content="请输入用户名">
                <el-button tabIndex="-1">用户名</el-button>
              </el-tooltip>
            </template>
          </el-input>
          </div>
        </el-form-item>
        <el-form-item label=" " prop="password" :rules="[{ validator: validatePass, trigger: 'blur' }]">
          <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
          <el-input type="password" placeholder="请输入密码" v-model="modelForm.password" auto-complete="off" size="medium" >
            <template slot="prepend">
              <el-tooltip placement="top" content="请输入密码">
                <el-button tabIndex="-1">密码</el-button>
              </el-tooltip>
            </template>
          </el-input>
          </div>
        </el-form-item>
        <el-form-item label=" " prop="passwordConfirm"  :rules="[{validator: validatePass2, trigger: 'blur' }]">
          <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
          <el-input type="password" placeholder="请输入确认密码" v-model="modelForm.passwordConfirm" auto-complete="off" size="medium" >
            <template slot="prepend">
              <el-tooltip placement="top" content="请输入确认密码">
                <el-button tabIndex="-1">确认密码</el-button>
              </el-tooltip>
            </template>
          </el-input>
          </div>
        </el-form-item>
        <el-form-item label=" " prop="templateId" :rules="[ { required: true, message: '请选择权限模板', trigger: 'change' }]">
          <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
            <div class="el-input-group__prepend" tabindex="-1">角色</div>
            <el-select class="el-cascader-margin w-100p" v-model="modelForm.templateId" placeholder="请选择角色">
              <el-option
                v-for="item in roleList"
                :key="item.id"
                :label="item.name"
                size="medium"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="text-left" style="font-size:13px;color:#ccc">(注:可以在权限模板页面修改或者新增权限模板)</div>
        </el-form-item>
      </el-form>
      <div class="foot-bar-button">
        <el-button type="primary" @click="submitForm('modelForm')" size="medium">提交</el-button>
        <el-button @click="resetForm('modelForm')" size="medium">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
//注意路径
import { regionDataPlus,CodeToText,TextToCode} from 'element-china-area-data'
export default {
  props: ["isShow", "id"], //参数
  data() {
    return {
//      templateList:[],
      roleList:[],
      options1: regionDataPlus,
      selectedOptions: [],
      propTypes:[],
      yetaiList:[
        {name:"火锅"},
        {name:"中餐"},
        {name:"西餐"}
      ],
      modelForm: {
          password:'',
        address:'',
          phone:'',
        username:'',
        templateId:'',
        propType:'DIRECT',
      },
      showDialog: false,
      options:[],
      activityId: "",
      isSave: true,
      downCategeryId: [],
      isUpdate: false,
      treeData: [],
      radio: "",
      city: [],
    };
  },
  watch: {
    isShow: function(newValue, oldValue) {
      this.showDialog = newValue;
      if (newValue) {
        if (this.id != "") {
          this.activityId = this.id;
          this.isSave = false;
          this.isUpdate = true;
          this.modelForm={};
          this.selectedOptions=[];
          this.$axios
            .get("organization/branchs/" + this.activityId + "/update")
            .then(data => {

              this.modelForm = data.content.branch;

              var dataValue = data.content;
              var districtId = [];
              if (data.content.branch.districtName ) {
                districtId.push(data.content.branch.districtName + '');
              }
              districtId.push(data.content.branch.districtId + '');
              this.modelForm.districtId=districtId
              var tree = dataValue.districtList;
              this.newLabel(tree);
              this.treeData = tree;
              this.propTypes=dataValue.propTypes;

              this.templateList=dataValue.templateList;

           this.templateList=dataValue.templateList;
              this.roleList=dataValue.roleList;

              var list=data.content.branch.location.split(",");
              this.selectedOptions.push(TextToCode[list[0]].code);
              this.selectedOptions.push(TextToCode[list[0]][list[1]].code);
              this.selectedOptions.push(TextToCode[list[0]][list[1]][list[2]].code);
            });
        } else {
          this.isSave = true;
          this.isUpdate = false;
          this.$axios.get("organization/branchs/create").then(data => {
            // this.modelForm = data.content.districtList;
            this.modelForm={

            }
            this.selectedOptions=[];
            this.modelForm.propType=data.content.propTypes[0].key;
            var dataValue = data.content;
            var tree = dataValue.districtList;
            this.newLabel(tree);
            this.treeData = tree;
            this.propTypes=dataValue.propTypes;
//            this.templateList=dataValue.templateList;
            this.roleList=dataValue.roleList;

            this.changeData();

          });
        }
      }
    }
  },
  created() {
    window.this = this;
  },
  methods: {
    validatePass (rule, value, callback) {

      if(!this.isUpdate){
        if (value === '') {
          callback(new Error('请输入密码'));
        }

      }
      /* else {
          if (this.modelForm.password !== '') {
              this.$refs.modelForm.validateField('password');

          }
      }*/
      callback();

    },
    validatePass2 (rule, value, callback)  {
      if(!this.isUpdate){
        if (value === '') {
          callback(new Error('请再次输入密码'));
        }
      }
      if (value !== this.modelForm.password ) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    },
    changeData(){
      /*for(var i=0;i<this.templateList.length;i++){
        if(this.templateList[i].name.indexOf('直营店模板')==0 && this.modelForm.propType=='DIRECT'){
            this.modelForm.templateId=this.templateList[i].id;
              /!*this.modelForm.propType=='DIRECT'*!/
        }else if(this.templateList[i].name.indexOf('加盟店模板')==0 && this.modelForm.propType=='LEAGUE'){
          this.modelForm.templateId=this.templateList[i].id;
        }
      }*/

    },
      handleChange (arr) {
      this.modelForm.location=CodeToText[arr[0]]+","+CodeToText[arr[1]]+","+CodeToText[arr[2]];

      },
    newLabel(newList) {
      if (newList) {
        for (var i = 0; i < newList.length; i++) {
          newList[i].label = newList[i].name;
          newList[i].value = newList[i].id + "";
          if (!newList[i].children || newList[i].children.length == 0) {
            newList[i].children = null;
          } else {
            for (var s = 0; s < newList[i].children.length; s++) {
              newList[i].children[s].label = newList[i].children[s].name;
              newList[i].children[s].value = newList[i].children[s].id + "";
              newList[i].children[s].children = null;
            }
          }
        }
      }
    },
    goBack() {
      this.router.go(-1);
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.modelForm.districtId=this.modelForm.districtId[this.modelForm.districtId.length-1];
          if (this.isSave) {
            this.$axios
              .post("organization/branchs/create", this.modelForm,"json",true)
              .then(data => {
                if (data.status == 200) {
                  this.$message({
                    message: data.message,
                    type: "success"
                  });
                  this.$emit("addSuccess");
                } else {
                  this.$message.error(data.message);
                }
              });
          } else {
            this.modelForm._method = "PUT";
            this.$axios
              .put(
                "organization/branchs/" + this.activityId + "/update",
                this.modelForm,
                "json",true
              )
              .then(data => {
                if (data.status == 200) {
                  this.$message({
                    message: data.message,
                    type: "success"
                  });
                  this.$emit("addSuccess");
                } else {
                  this.$message.error(data.message);
                }
              });
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$emit("close");
      this.showDialog = false;
    },
    handleClose(done) {
      this.$emit("close");
      done();
    },
    isNum(item, key) {
      var r = /^\+?[1-9][0-9]*$/;
      if (!r.test(item[key])) {
        item[key] = "0.00";
      } else {
        item[key] = item[key];
      }
    },
    isDouble(item, key) {
      var isNum = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
      if (!isNum.test(item[key])) {
        item[key] = "0.00";
      } else {
        item[key] = item[key];
      }
    }
  }
};
</script>
<style scoped>
.el-from-item_title {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #48576a;
  line-height: 1;
  padding: 11px 12px 11px 0;
  box-sizing: border-box;
}
.el-from-item_content {
  line-height: 36px;
  position: relative;
  font-size: 15px;
}
</style>
